<template>
  <div class="modal">
    <el-dialog
      v-model="dialogVisible"
      :title="commandIsCreate ? modalConfig.header.titleOnCreate : modalConfig.header.titleOnEdit"
      width="25%"
      center
    >
      <template #default>
        <el-form :model="modalForm" label-width="80px" size="large">
          <template v-for="item in modalConfig.formItems" :key="item.prop">
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              v-show="commandIsCreate === false && item.onEditHide ? false : true"
            >
              <template v-if="item.type === 'input'">
                <el-input
                  v-model="modalForm[item.prop as string]"
                  :placeholder="item.placeholder"
                  :disabled="item.disabled ?? false"
                />
              </template>
              <template v-if="item.type === 'date-picker'">
                <el-date-picker
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  v-model="modalForm[item.prop as string]"
                />
              </template>
              <template v-if="item.type === 'select'">
                <el-select
                  v-model="modalForm[item.prop as string]"
                  :placeholder="item.placeholder"
                  style="width: 100%"
                >
                  <template v-for="option in item.options" :key="option.value">
                    <el-option :label="option.label" :value="option.value" />
                  </template>
                </el-select>
              </template>
              <template v-if="item.type === 'custom'">
                <slot :name="item.slotName"></slot>
              </template>
            </el-form-item>
          </template>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer" :class="'position-' + (modalConfig.btnPosition ?? 'center')">
          <el-button @click="handleCancelClick">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useSystemStore } from '@/store/mian/system';
import type { IModalProps } from '@/components/page-modal/type';

const props = defineProps<IModalProps>();

const initialForm: any = {};
for (const item of props.modalConfig.formItems) {
  if (item.prop) initialForm[item.prop] = item.defaultValue ?? '';
}
// 表单数据
const modalForm = reactive(initialForm);

// 控制弹窗显示与隐藏
const dialogVisible = ref(false);

// 判断是打开的弹窗是创建操作还是编辑操作，同时控制是否显示密码输入框
const commandIsCreate = ref(true);
// 临时储存编辑用户时传来的数据，因为编辑操作需要用到id
const editData = ref<any>();

/**
 * @function setModalVisible 设置弹窗显示与隐藏
 * @param isCreate
 * @param data 表格中的行数据
 */
function openModal(isCreate: boolean = true, data?: any) {
  dialogVisible.value = true;

  if (!isCreate && data) {
    // 编辑数据
    // 1.让isCreateRef为false，用于点击确认时的操作，也用于控制密码输入框的显示
    commandIsCreate.value = false;
    // 2.遍历modalForm，将data中的数据赋值给modalForm，因为data中有部分数据是不能编辑的
    for (const key in modalForm) {
      modalForm[key] = data[key];
    }
    // 3.将data中的id赋值给editData暂存
    editData.value = data;
  } else {
    // 新建数据，将表单置空
    for (const key in modalForm) {
      const item = props.modalConfig.formItems.find((item) => item.prop === key);
      modalForm[key] = item?.defaultValue ?? '';
    }
    commandIsCreate.value = true;
  }
}

/**获取到store，用于发送异步请求*/
const systemStore = useSystemStore();

/**
 * @function handleConfirmClick 确认按钮点击事件
 */
async function handleConfirmClick() {
  // 1.先关闭弹窗再进行后续操作
  dialogVisible.value = false;
  commandIsCreate.value = true;
  let infoData = modalForm;
  // 处理携带的额外信息的情况
  if (props.otherInfo) {
    infoData = { ...infoData, ...props.otherInfo };
  }

  if (commandIsCreate.value) {
    await systemStore.createRecordAction(props.modalConfig.pageName, infoData);
  } else {
    // 编辑用户
    await systemStore.editRecordByIdAction(props.modalConfig.pageName, editData.value.id, infoData);
  }
}

function handleCancelClick() {
  dialogVisible.value = false;
  commandIsCreate.value = true;
}

defineExpose({
  openModal
});
</script>

<style scoped lang="scss">
.modal {
  .el-form {
    padding-right: 20px;
  }

  .dialog-footer {
    display: flex;
  }

  .position-right {
    justify-content: flex-end;
  }

  .position-center {
    justify-content: center;
  }

  .position-left {
    justify-content: flex-start;
  }
}
</style>
